<template>
	<view>
		<uni-card>
			<u--form :model="params" :rules="rules" ref="uForm">
				<u-steps direction="column">
					<u-steps-item title="维修时间">
						<text class="slot-icon" slot="icon">
							<u-icon name="clock-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="fix_time" borderBottom ref="item1">
								<uni-datetime-picker type="datetime" :clear-icon="false" v-model="params.fix_time"
									@change="timeChange" @maskClick="maskClick" />
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="维修描述">
						<text class="slot-icon" slot="icon">
							<u-icon name="bell-fill"></u-icon>
						</text>
						<template slot="desc">
							<u-form-item prop="fix_desc" borderBottom ref="item1">
								<u--textarea placeholder="请输入维修描述" autoHeight v-model="params.fix_desc"></u--textarea>
							</u-form-item>
						</template>
					</u-steps-item>
					<u-steps-item title="维修图片">
						<text class="slot-icon" slot="icon">
							<u-icon name="clock-fill"></u-icon>
						</text>
						<template slot="desc">
							<!-- prop="photo" -->
							<u-form-item borderBottom ref="item1">
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="3"></u-upload>
							</u-form-item>
						</template>
					</u-steps-item>
				</u-steps>
				<u-form-item>
					<u-button style="width:50%;" type="primary" shape="circle" text="申请提交" @click="submit"></u-button>
				</u-form-item>
			</u--form>
		</uni-card>
	</view>
</template>

<script>
	import {
		clickToTask
	} from '@/api/api.js'
	export default {
		data() {
			return {
				fileList1: [],
				fixPhotoArray: [],
				params: {
					apply_id: '',
					fix_time: '',
					fix_desc: '',
					fix_photo: ''
				},
				rules: {
					fix_time: {
						type: 'string',
						required: true,
						message: '请选择时间',
						trigger: ['blur', 'change']
					},
					fix_desc: {
						type: 'string',
						required: true,
						message: '请简单填写维修描述',
						trigger: ['blur', 'change']
					},
					// photo: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请至少添加一张图片',
					// 	trigger: ['blur', 'change']
					// },
				}
			}
		},
		onLoad(data) {
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('record', function(data) {
				console.log('record', data)
				that.params.apply_id = data.apply_id
			})
			// eventChannel.on('userInfo', function(data){
			// 	console.log('userInfo',data)
			// 	this.params.fix_by = data.people_code
			// })
		},

		methods: {
			maskClick() {

			},
			// 维修时间
			timeChange(value) {
				console.log('value', value)
				this.params.fix_time = value
			},
			// 提交完成信息
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log('then', this.params)
					clickToTask(this.params).then(res => {
						console.log('任务完成', res)
						if (res.data == 'success') {
							uni.showModal({
								title: '任务完成！',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					})
				}).catch(res => {
					console.log('catch', this.params)
				})

			},
			/**
			 * 图片上传
			 */
			async afterRead(event) {
				console.log('event', event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this.fixPhotoArray.splice(event.index, 1)
				this.params.fix_photo = this.fixPhotoArray.join(',')
				this.fileList1.splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://lxsw.pcippc.com/api/water/savePicture', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let result = JSON.parse(res.data)
							this.fixPhotoArray.push(result.fileName)
							this.params.fix_photo = this.fixPhotoArray.join(',')
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		},
	}
</script>

<style scoped>

</style>